import HoButton from './utils/HoButton';

interface LeftProps {
  page: number;
  setPage: (index: number) => void;
}

const Left = (props: LeftProps) => {
  const { page, setPage } = props;
  const handleRightButton = (index: number) => {
    return () => {
      setPage(index);
    };
  };

  return (
    <div id="left">
      <div id="lefy_top">
        <HoButton isActive={page === 0} onClick={handleRightButton(0)} />
        <HoButton isActive={page === 1} onClick={handleRightButton(1)} />
        <HoButton isActive={page === 2} onClick={handleRightButton(2)} />
      </div>
      <div id="left_bottom">
        <HoButton isActive={false} onClick={() => console.log('you clicked 4')} />
      </div>
    </div>
  );
};

export default Left;
